<script setup lang="tsx">

import { onMounted, reactive } from 'vue';
import { PageEntity } from '@/entity/page.entity';
import { createStudentApi, deleteStudentApi, getStudentPageApi, updateStudentApi } from '@/service/path/train/student';
import { useTable } from '@/hooks/common/table';
import { postAction } from '@/service/request/action';
import { useCrud } from '@/hooks/common/crud';
import { getClassesListApi } from '@/service/path/train/classes';
import StudentSearch from '@/views/train/student/modules/student-search.vue';
import StudentModal from '@/views/train/student/modules/student-modal.vue';
import { getSourceUrl } from '@/service/request';
import dayjs from 'dayjs';

const state = reactive({
  pageInfo: new PageEntity(),
  opPath: {
    createPath: createStudentApi,
    updatePath: updateStudentApi
  },
  classList: [],
  sexMap: {
    1: '男',
    2: '女'
  }
});
const {
  columns,
  columnChecks,
  data,
  loading,
  mobilePagination,
  searchParams,
  getData,
  clickSearch,
  clickReset
} = useTable({
  apiFn: () => postAction(getStudentPageApi, state.pageInfo),
  showTotal: true,
  immediate: true,
  apiParams: {
    name: '',
    className: '',
    telephone: ''
  },
  pageInfo: state.pageInfo,
  columns: () => [
    {
      title: '序号',
      key: 'index'
    },
    {
      title: '姓名',
      key: 'name'
    },
    {
      title: '所属班级',
      key: 'className'
    },
    {
      title: '联系电话',
      key: 'telephone'
    },
    {
      title: '入学日期',
      key: 'entryDate'
    },
    {
      title: '性别',
      key: 'sex',
      render: (row: Api.Train.Student) => {
        return state.sexMap[row.sex];
      }
    },
    {
      title: '学生照片',
      key: 'photo',
      render: (row: Api.Train.Student) => <n-image src={getSourceUrl(row.photoSource)} width="50"></n-image>
    },
    {
      title: '操作',
      key: 'action',
      render: (row: Api.Train.Student) => <common-operate-column
          row-data={row} onClickEdit={row => clickEdit(row.id, row)}
          onClickDelete={row => clickDelete(row.id)}
      />
    }
  ]
});
const {
  modalFormRef, childRef, clickAdd, clickEdit, clickDelete
} = useCrud({
  uris: {
    delete: deleteStudentApi
  },
  refreshList: getData
});
const getClassList = () => {
  postAction(getClassesListApi, {}).then(res => {
    if (!res.error) {
      state.classList = res.data;
    }
  });
};
const otherInitMethod = (row: Api.Train.Student) => {
  if (row) {
    if (row.entryDate) {
      childRef.value.state.ruleForm.entryDate = new Date(row.entryDate).getTime();
    }
    if (row.photo) {
      childRef.value.state.source = row.photoSource;
    }
  }
};
const submitTransferData = formData => {
  if (formData.entryDate) {
    formData.entryDate = dayjs(formData.entryDate).format('YYYY-MM-DD');
  }
  return formData;
}
onMounted(() => {
  getClassList();
});
</script>

<template>
  <div class="flex-col-stretch gap-16px lt-sm:overflow-auto">
    <StudentSearch v-model:model="searchParams" @click-reset="clickReset" @click-search="clickSearch" />
    <n-card title="学生列表" class="flex-1">
      <template #header-extra>
        <TableHeaderOperation
            v-model:columns="columnChecks"
            :loading="loading"
            @click-add="clickAdd"
        />
      </template>
      <n-data-table
          :columns="columns"
          :data="data"
          :loading="loading"
          remote
          :row-key="row => row.id"
          :pagination="mobilePagination"
          class="sm:h-full"
      />
    </n-card>
    <CommonModal ref="modalFormRef" title="学生" :op-path="state.opPath" @refresh-list="getData"
                 :other-init-method="otherInitMethod" :submit-transfer-data="submitTransferData">
      <StudentModal ref="childRef" :class-list="state.classList" />
    </CommonModal>
  </div>
</template>

<style scoped>

</style>
